<template>
  <div class="home" id="container">
    <div class="btn-box">
      <button @click="mapFun('points')">打点</button>
      <button @click="mapFun('line')">画线</button>
      <button @click="mapFun('polygon')">画色块</button>
      <button @click="mapFun('trajectory')">画运动轨迹</button>
      <button @click="mapFun('warning')">画告警图标</button>
      <button @click="mapFun('Heatmap')">画热力图</button>
      <button @click="mapFun('clickHasLine')">开启点连线</button>
      <button @click="removeLayerGroup">清空图层</button>
    </div>
  </div>
</template>

<script>
import L from 'leaflet'
import "leaflet/dist/leaflet.css"
import 'leaflet.animatedmarker/src/AnimatedMarker'
import "@/utils/blinkmarker.js"
import "@/assets/css/cblink.css"
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
export default {
  name: 'HomeView',
  data() {
    return {
      map: undefined,
      publicLayerGroup: null,
      routeLine: undefined,
      animatedMarker: undefined,
      polygonPoints: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.initLmap([34.195274, 108.869047])
    }, 300);
  },
  methods: {
    // 初始化地图
    initLmap(center) {
      var that = this
      //   //定义图层样式
      var layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
      that.map = new L.map('container', {
        minZoom: 1,
        maxZoom: 25,
        center: center,
        zoom: 16,
        zoomControl: true,
        preferCanvas: true,
        attributionControl: false, //右下角属性控件，不显示
        layers: [layer], // 图层
      })
      //   添加公共图层
      that.publicLayerGroup = L.layerGroup([]);
      that.publicLayerGroup.addTo(that.map);//添加图层到map中
    },
    mapFun(type) {
      switch (type) {
        // 地图上打点
        case 'points':
          this.pointsFun();
          break
        case 'line':
          this.lineFun();
          break
        case 'polygon':
          this.polygonFun();
          break
        case 'trajectory':
          this.walkLine();
          break
        case 'warning':
          this.warningFun();
          break
        case 'Heatmap':
          this.heatmaplay();
          break
        case 'clickHasLine':
          this.addLine();
          break
      }
    },
    removeLayerGroup() {
      // 先清除该图层
      this.publicLayerGroup.clearLayers()
    },
    pointsFun() {
      // 画图标
      let myIcon = L.icon({
        iconUrl: require(`@/assets/icon/red.png`),
        iconSize: [21, 33],
        iconAnchor: [12, 30]
      });
      let pointsDt = [
        [34.20150958062575, 108.86365413665771], [34.19829732944411, 108.86358976364137], [34.19833282460102, 108.86940479278566],
        [34.19829732944411, 108.87560606002809], [34.19838606730836, 108.88017654418947], [34.19396680818527, 108.88026237487794],
        [34.19386031715589, 108.87558460235597]
      ];
      pointsDt.forEach((dt) => {
        L.marker(dt, { icon: myIcon }).addTo(this.publicLayerGroup);
      });
    },
    lineFun() {
      let lineDt = [
        [34.20150958062575, 108.86365413665771], [34.19829732944411, 108.86358976364137], [34.19833282460102, 108.86940479278566],
        [34.19829732944411, 108.87560606002809], [34.19838606730836, 108.88017654418947], [34.19396680818527, 108.88026237487794],
        [34.19386031715589, 108.87558460235597]
      ];
      // 画线
      this.routeLine = L.polyline(lineDt, { color: '#ffa500', weight: 8 }).addTo(this.publicLayerGroup);
    },
    polygonFun() {
      let latlngs = [[34.19829732944411, 108.86358976364137], [34.19833282460102, 108.86940479278566],
      [34.19829732944411, 108.87560606002809], [34.19838606730836, 108.88017654418947], [34.19396680818527, 108.88026237487794],
      [34.19386031715589, 108.87558460235597]];
      L.polygon(latlngs, { color: 'red' }).addTo(this.publicLayerGroup);
    },
    walkLine() {
      let _car = require(`@/assets/icon/red.png`);
      let carIcon = L.icon({
        iconUrl: _car,
        iconSize: [21, 33],
        iconAnchor: [12, 30],
        popupAnchor: [0, 0]
      });
      // 走过颜色this.routeLine
      let _line = [
        [34.20150958062575, 108.86365413665771], [34.19829732944411, 108.86358976364137], [34.19833282460102, 108.86940479278566],
        [34.19829732944411, 108.87560606002809], [34.19838606730836, 108.88017654418947]
      ];
      this.animatedMarker = L.animatedMarker(_line, {
        interval: 2000, // 默认为100mm
        icon: carIcon
      }).addTo(this.publicLayerGroup);
      setTimeout(() => {
        // animatedMarker.stop();
        this.animatedMarker.stop();
      }, 2000);
      setTimeout(() => {
        this.animatedMarker.start();
      }, 5000);
    },
    warningFun() {
      L.blinkMarker([34.2005, 108.8606], {
        iconSize: [12, 12],
        color: 'green',
        diveColor: 'orange',
        level: '3',
        speedTime: 2,
      }).addTo(this.publicLayerGroup);
      L.blinkMarker([34.2005, 108.8626], {
        iconSize: [12, 12],
        color: 'green',
        speedTime: 1
      }).addTo(this.publicLayerGroup);
      L.blinkMarker([34.1988, 108.86382], {
        iconSize: [18, 18],
        color: 'pink',
        diveColor: 'orange',
        speedTime: 1
      }).addTo(this.publicLayerGroup);
      L.blinkMarker([34.19829, 108.8756060], {
        iconSize: [25, 25],
        level: '3',
        speedTime: 1
      }).addTo(this.publicLayerGroup);
    },
    heatmaplay() {
      let cfg = {
        'radius': 0.00006,
        'maxOpacity': 0.8,
        'scaleRadius': true,
        'useLocalExtrema': true,
        latField: 'lat',
        lngField: 'lng',
        gradient: {
          // "1": "rgba(255,0,0,1)",
          // "0.75": "rgba(255,0,0,0.6)",
          // "0.5": "rgba(255,0,0,0.5)",
          // "0.25": "rgba(255,0,0,0.2)",
          // "0.5": "rgba(255,255,0,1)",
          // "0.25": "rgba(255,165,0,1)",
          "1": "rgba(0,0,255,1)",
          "0.75": "rgba(0,255,0,1)",
          "0.5": "rgba(255,255,0,1)",
          "0.25": "rgba(255,165,0,1)",
        },
      }
      var testData = {
        // max: 8,
        data: [
          { lat: 34.20150958062575, lng: 108.86365413665771 },
          { lat: 34.201446357249424, lng: 108.86365279555324 },
          { lat: 34.20140309912251, lng: 108.8636487722397 },
          { lat: 34.201346357249424, lng: 108.86365379555324 },
          { lat: 34.20125668683594, lng: 108.8636487722397 },
          { lat: 34.20119900919869, lng: 108.86365413665771 },
          { lat: 34.20110583754748, lng: 108.86366486549379 },
          { lat: 34.20107478030752, lng: 108.86364340782166 },
        ]
      }
      let heatmapLayer = new HeatmapOverlay(cfg);
      heatmapLayer.addTo(this.publicLayerGroup)
      heatmapLayer.setData(testData)
    },
    addLine() {
      this.map.on("click", (e) => {
        let lat = e.latlng.lat;
        let lng = e.latlng.lng;
        this.polygonPoints.push([lat, lng]);
        L.polygon(this.polygonPoints, { color: 'red' }).addTo(this.publicLayerGroup);
      });
    }

  }
}
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  .btn-box {
    position: absolute;
    left: 40%;
    top: 2%;
    z-index: 999;
    button {
      width: 100px;
      height: 30px;
      line-height: 30px;
      border-radius: 6px;
      margin-right: 10px;
      border-width: 1px;
    }
  }
}
</style>
